<template>
    <view class="app-goods-price">
        <view class="top dir-left-nowrap">

            <view
                v-if="goods.is_negotiable && goods.is_negotiable === 1"
                class="box-grow-1 cross-center negotiable"
                :class="theme + '-m-text ' + theme"
            >
                价格面议
            </view>

            <view class="box-grow-1" v-else>

                <view v-if="goods.level_show === 1">
                    <view class="dir-left-nowrap cross-bottom">
                        <view class="price box-grow-0" style="color: #f39800;font-family: DIN;">
                            <app-price :max="`${goodsPrice.max}`" :min="`${goodsPrice.min}`"
                                       :default-price="`${goodsPrice.price}`" :theme="theme"></app-price>
                        </view>
                        <view v-if="is_show_member" class="app-member-mark">
                            <app-member-mark :theme="theme"></app-member-mark>
                        </view>
                        <view>
                            <app-sup-vip
                                v-if="discount"
                                :is_vip_card_user="is_vip_card_user"
                                margin="0 0 0 13rpx"
                                :discount="discount"
                            ></app-sup-vip>
                        </view>
                    </view>
                    <view class="dir-left-nowrap cross-bottom">
                        <view
                            v-if="isUnderlinePrice == 1 && sign !== 'exchange'"
                            :class="theme + '-m-text box-grow-0 member-price ' + theme">
                            <template v-if="sign === 'flash_sale'">
                                <app-price :max="goodsPrice.price_max" :min="goodsPrice.price_min"  type="text-price-all"></app-price>
                            </template>
                            <template v-if="sign === 'goods'">
                                <app-price :price="`${goodsPrice.original_price}`" type="text-price-all"></app-price>
                            </template>
                        </view>
                        <view class="sales" v-if="goods.is_sales === 1">销量{{goods.sales}}{{goods.unit}}</view>
                        <view class="stock" v-if="sign === 'exchange'">库存{{goods.goods_stock}}{{goods.unit}}</view>
                    </view>
                </view>

                <view v-else>
                    <view class="dir-left-nowrap cross-bottom">
                        <view :class="theme + '-m-text price ' + theme"  style="font-family: DIN;">
                            <app-price :max="`${goodsPrice.max}`" :min="`${goodsPrice.min}`"
                                       :default-price="`${goodsPrice.defaultPrice}`"></app-price>
                        </view>
                        <view v-if="isUnderlinePrice == 1 && sign !== 'exchange'" class="origin-price" >
                            <app-price :price="`${goodsPrice.original_price}`" type="text-price-all"></app-price>
                        </view>
                        <view>
                            <app-sup-vip
                                v-if="discount"
                                :is_vip_card_user="is_vip_card_user"
                                margin="0 0 0 13rpx"
                                :discount="discount"
                            ></app-sup-vip>
                        </view>
                    </view>
                    <view class="dir-left-nowrap cross-bottom">
                        <view class="sales" v-if="goods.is_sales === 1">销量{{goods.sales}}{{goods.unit}}</view>
                        <view class="stock" v-if="sign === 'exchange'">库存{{goods.goods_stock}}{{goods.unit}}</view>
                    </view>
                </view>

            </view>

            <view class="box-grow-0 share" @click="shareClick">
                <image src="../../../static/image/icon/icon-share.png"></image>
                <view>分享</view>
            </view>

            <view>
                <app-goods-quick-share
                    v-model="quickShareShow"
                    @quickShare="quickShare"
                    :goods="goods"
                ></app-goods-quick-share>
            </view>

            <view>
                <app-share-qr-code
                    v-model="shareShow"
                   :url="newShareUrl"
                   :goods="goods"
                   :poster-config="posterConfig"
                   :poster-generate="posterGenerate"
                   :has-poster-nav="hasPosterNav"
                ></app-share-qr-code>
            </view>

        </view>
        <view v-if="goods.level_show === 2 && goods.is_negotiable === 0">
            <app-join-member
                :member-max-price="`${goods.price_member_max}`"
                :member-min-price="`${goods.price_member_min}`"
                :price="`${goods.price}`"
            ></app-join-member>
        </view>
    </view>
</template>

<script>
    import {mapState} from 'vuex';
    import appPrice from '../goods/app-price.vue';
    import appMemberMark from '../../page-component/app-member-mark/app-member-mark.vue';
    import appShareQrCode from '../../page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';
    import appJoinMember from "../../page-component/app-join-member/app-join-member.vue";
    import appGoodsQuickShare from '../goods/app-goods-quick-share.vue';

    export default {
        components: {
            'app-price': appPrice,
            'app-member-mark': appMemberMark,
            'app-share-qr-code': appShareQrCode,
            'app-join-member': appJoinMember,
            appGoodsQuickShare
        },
        props: {
            posterConfig: String,
            posterGenerate: String,
            hasPosterNav: {
                type: Boolean,
                default() {
                    return false
                },
            },
            goods: Object,
            is_vip_goods: {
                type: Number,
                default() {
                    return 0;
                }
            },
            discount: {
                type: String,
                default() {
                    return null;
                }
            },
            selectAttr: {
                type: Object,
                default() {
                    return {};
                }
            },
            shareUrl: {
                type: String,
                default() {
                    return '';
                }
            },
            is_vip_card_user: {
                type: Number,
                default() {
                    return 0
                }
            },
            theme: String,
            is_show_member: {
                type: Boolean,
                default() {
                    return true;
                }
            },
            sign:  {
                type: String,
                default() {
                    return 'goods';
                }
            }
        },
        data() {
            return {
                quickShareShow: false,
                shareShow: false
            };
        },
        computed: {
            ...mapState({
                isUnderlinePrice: state => state.mallConfig.mall.setting.is_underline_price,
            }),
            goodsPrice() {
                if (!this.goods) return {};
                let { price_member_max, price_member_min, price, price_max, price_min, original_price } = this.goods;
                let data = {};
                if (this.goods.level_show === 1) {
                    data = {
                        max: price_member_max,
                        min: price_member_min,
                        defaultPrice: price,
                        original_price: price,
                        price_max: price_max,
                        price_min: price_min
                    };
                } else {
                    data = {
                        max: price_max,
                        min: price_min,
                        defaultPrice: price,
                        original_price: original_price
                    }
                }
                return data;
            },
            newShareUrl() {
                if (this.shareUrl) {
                    return this.shareUrl;
                } else {
                    if (this.goods) {
                        return this.$api.poster.goods + '&goods_id=' + this.goods.id;
                    } else {
                        return ``;
                    }
                }
            }
        },
        methods: {
            quickShare(e) {
                this.$emit('quickShare', e);
            },
            shareClick() {
                // 判断登入
                if (!this.$user.isLogin()) {
                    this.$user.getInfo().then(() => {
                    });
                } else {
                    if (this.goods.extra_quick_share) {
                        this.quickShareShow = true;
                    } else {
                        this.shareShow = true;
                    }
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .vip-price {
        width: #{148upx};
        height: #{27upx};
        margin-left: #{13rpx};

        .item {
            height: #{27upx};
            width: 50%;
        }

        .left {
            border-top-left-radius: #{13upx};
            border-bottom-left-radius: #{13upx};
            background-color: #4e4040;
            position: relative;
        }

        .right {
            border-top-right-radius: #{13upx};
            border-bottom-right-radius: #{13upx};
            background: linear-gradient(45deg, #edc9a8, #fdebde);
            font-size: #{18upx};
            line-height: #{27upx};
            text-align: center;
            color: #4e4040;
        }

        .vip-icon {
            width: #{51upx};
            height: #{14upx};
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .app-goods-price {
        padding: 0 #{24rpx};
        background-color: #ffffff;

        .top {
            padding-bottom: #{24rpx};

            .price {
                font-size: #{56rpx};
                line-height: 1;
            }

            .member-img {
                width: #{94rpx};
                height: #{40rpx};
                margin-left: #{16rpx};
            }

            .origin-price {
                text-decoration: line-through;
                margin-left: #{20rpx};
                color: $uni-general-color-two;
                font-size: $uni-font-size-general-one;
            }

            .sales {
                color: $uni-general-color-two;
                font-size: $uni-font-size-weak-one;
                margin-top: #{22rpx};
            }

            .stock {
                color: $uni-general-color-two;
                font-size: $uni-font-size-weak-one;
                margin-top: #{22rpx};
                margin-left: #{10rpx};
            }

            .app-member-mark {
                margin-left: #{12rpx};
            }

            .member-price {
                font-size: $uni-font-size-import-two;
                margin-right: #{20rpx};
                line-height: 1;
            }

            .negotiable {
                font-size: #{48rpx};
            }
        }

        .share {
            margin-top: #{16rpx};
            font-size: $uni-font-size-weak-two;
            color: $uni-general-color-one;

            image {
                width: #{40rpx};
                height: #{40rpx};
                margin-bottom: #{10rpx};
            }
        }
    }
</style>
